<template>
  <div class="work_order_detail">
    <!--返回-->
    <!-- <div>
      <router-link to="/myWorkOrder">
        <h4><i class="el-icon-back"></i>返回</h4>
      </router-link>
    </div> -->
    <div class="work_order_left">
      <div class="left_top">
        <h4>医生信息</h4>
        <ul>
          <li>
            <h6>医生信息：</h6>
            <div class="doctor_info">
              <div class="hospital">
                <div>
                  <img src="../../assets/common/doctor.svg" alt="">
                  <span class="text">医生：</span>
                  <span class="value">{{ doctorName }}</span>
                </div>
                <div>
                  <img src="../../assets/common/hospital.svg" alt="">
                  <span class="text">医院：</span>
                  <span class="value">{{ hospitalName }}</span>
                </div>
              </div>
              <div class="depart">
                <div>
                  <img src="../../assets/common/department.svg" alt="">
                  <span class="text">科室：</span>
                  <span class="value">{{ depart }}</span>
                </div>
                <div>
                  <img src="../../assets/common/work_order_phone.svg" alt="">
                  <span class="text">电话：</span>
                  <span class="value">{{ doctorContact.toString() }}</span>
                </div>
              </div>
            </div>
          </li>
          <li>
            <h6>拜访记录：</h6>
            <div class="visit_record">
              <div>
                <img src="../../assets/common/serial_number_set.svg" alt="">
                <span class="text">编号：</span>
                <span class="value">{{ callRecordId }}</span>
              </div>
              <div>
                <img src="../../assets/common/visit_time.svg" alt="">
                <span class="text">拜访时间：</span>
                <span class="value">{{ callTime }}</span>
              </div>
              <div>
                <img src="../../assets/common/visit_result.svg" alt="">
                <span class="text">拜访结果：</span>
                <span class="value">{{ callResult }}</span>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="left_bottom">
        <h4>工单信息</h4>
        <ul>
          <li>
            <span class="work_text">工单编号：</span>
            <span>{{ workOrderId }}</span>
            <el-tag type="warning" size="small" v-if="workOrderStatus == '0'"
                    style="background: rgba(145, 147, 152, 0.2);color: #919398;">待处理
            </el-tag>
            <el-tag type="success" size="small" v-if="workOrderStatus == '1'"
                    style="background: rgba(103, 194, 58, 0.2);color:#67C23A">已处理
            </el-tag>
          </li>
          <li>
            <span class="work_text">创建人：</span>
            <span>{{ createRepName }}{{ email }}</span>
          </li>
          <li>
            <span class="work_text">创建时间：</span>
            <span>{{ sysInsert }}</span>
          </li>
          <li>
            <span class="work_text">截止时间：</span>
            <span>{{ deadlineTime }}</span>
          </li>
          <li class="current_deal_user">
            <span class="work_text">当前处理人：</span>
            <span>{{ currentHandlerName }}{{ currentHandlerEmail }}</span>
          </li>
          <li>
            <span class="work_text">项目名称：</span>
            <span>{{ productName }}</span>
          </li>
          <li>
            <span class="work_text">工单标题：</span>
            <span>{{ workOrderTitle }}</span>
          </li>
          <li>
            <span class="work_text">工单描述：</span>
            <span>{{ workOrderDesc }}</span>
          </li>
          <li>
            <span class="work_text">图片：</span>
            <img v-for="url in imgUrls" style="height: 100px;margin-right: 10px" :src="url" alt="">
          </li>
        </ul>
      </div>
    </div>
    <div class="work_order_right">
      <div class="right_top" v-if="user_info.repId == dealRepId.dealRepIdNew && workOrderStatus == '0'">
        <h4>操作处理</h4>
        <div class="operation_deal">
          <div class="operation_sub_content">
            <div class="result">
              <div class="operation_text">
                <span>*</span>
                <span class="search_text">处理结果：</span>
              </div>
              <el-select size="small" v-model="treatmentResults" value-key="id" placeholder="请选择">
                <el-option v-for="item in treatmentResultsList" :key="item.id" :label="item.name"
                           :value="item"></el-option>
              </el-select>
            </div>
            <div class="distribution">
              <div class="operation_text">
                <span>*</span>
                <span class="search_text">分配给：</span>
              </div>
              <el-select
                size="small"
                v-model="assignedTo"
                placeholder="请输入关键词"
                value-key="id">
                <el-option
                  v-for="item in assignedToList"
                  :key="item.id"
                  :label="item.name"
                  :value="item">
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="btn">
            <el-button type="primary" size="small" @click="determine">确定</el-button>
          </div>
        </div>
      </div>
      <div
        :class="{
          right_bottom:true,
          right_bottom_not_operate_height:user_info.repId == dealRepId.dealRepIdNew && workOrderStatus == '0' ? false : true,
          right_bottom_operate_height:user_info.repId == dealRepId.dealRepIdNew && workOrderStatus == '0' && imgUrls.length == 0 ? true : false,
          right_bottom_not_operate_img_height:!(user_info.repId == dealRepId.dealRepIdNew && workOrderStatus == '0') && imgUrls.length != 0 ? true : false,
          right_bottom_el_timeline:is_finish_work}">
        <h4>处理流程</h4>
        <div id="time-line">
          <el-timeline>
            <el-timeline-item
              v-for="(activity, index) in activities"
              :key="index"
              :color="activity.color"
              :timestamp="activity.timestamp"
              placement="top">
              <!--时间线左边-->
              <div class="line-left">
                <div class="interval">
                  {{ activity.content1 }}{{ activity.content2 }}
                </div>
              </div>
              <!--时间线右边-->
              <div class="line-right">
                <div class="interval">{{ activity.content3 }}</div>
                <div class="interval detail">{{ activity.content1 }}{{ activity.content3 }}</div>
                <div class="interval detail">{{ activity.content1 }}{{ activity.content4 }}{{ activity.content5 }}</div>
              </div>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
    </div>
    <!--基本信息-->
    <!-- <div class="blockMould">
      <el-row :gutter="20">
        <el-col :span="4">
          <div class="search_list">
            <span class="search_text">工单编号：</span>
            <span>{{ workOrderId }}</span>
          </div>
          <div class="search_list">
            <span class="search_text">当前状态：</span>
            <el-tag type="warning" size="small" v-if="workOrderStatus == '0'">待处理</el-tag>
            <el-tag type="success" size="small" v-if="workOrderStatus == '1'">已处理</el-tag>
          </div>
        </el-col>
        <el-col :span="1" class="verticalLine1px"></el-col>
        <el-col :span="9">
          <div class="search_list">
            <span class="search_text">创建人：</span>
            <span>{{ createRepName }} {{ email }}</span>
          </div>
          <div class="search_list">
            <span class="search_text">创建时间：</span>
            <span>{{ sysInsert }}</span>
          </div>
          <div class="search_list">
            <span class="search_text">截止时间：</span>
            <span>{{ deadlineTime }}</span>
          </div>
        </el-col>
        <el-col :span="1" class="verticalLine1px"></el-col>
        <el-col :span="9">
          <div class="search_list">
            <span class="search_text" style="width: 100px">当前处理人：</span>
            <span>{{ currentHandlerName }} {{ currentHandlerEmail }}</span>
          </div>
        </el-col>
      </el-row>
    </div> -->
    <!--详细信息-->
    <!-- <div class="blockMould"> -->
    <!--项目-->
    <!-- <div class="search_list">
      <span class="search_text">项目：</span>
      <span>{{ productName }}</span>
    </div> -->
    <!--医生信息-->
    <!-- <div class="search_list">
      <span class="search_text">医生信息：</span>
      <span>{{ doctorName }}  ·  {{ hospitalName }}  · {{ depart }}</span>
      <span> {{doctorContact.toString()}}</span>
    </div> -->
    <!--拜访记录-->
    <!-- <div class="search_list">
      <span class="search_text">拜访记录：</span>
      <span style="margin-right: 20px">编号：{{ callRecordId }}</span>
      <span style="margin-right: 20px">拜访时间：{{ callTime }}</span>
      <span style="margin-right: 20px">拜访结果：{{ callResult }}</span>
    </div> -->
    <!--工单标题-->
    <!-- <div class="search_list">
      <span class="search_text">工单标题：</span>
      <span>{{ workOrderTitle }}</span>
    </div> -->
    <!--工单标题-->
    <!-- <div class="search_list">
      <span class="search_text">工单描述：</span>
      <span>{{ workOrderDesc }}</span>
    </div> -->
    <!--图片-->
    <!-- <div class="search_list">
      <span class="search_text">图片：</span>
      <img v-for="url in imgUrls" style="height: 100px;margin-right: 10px" :src="url" alt="">
    </div> -->
    <!-- </div> -->
    <!--分配-->
    <!-- <div class="blockMould" v-if="user_info.repId == dealRepId.dealRepIdNew && workOrderStatus == '0'"> -->
    <!--处理结果-->
    <!-- <div class="search_list">
      <span class="search_text">*处理结果：</span>
      <el-select size="small" v-model="treatmentResults" value-key="id" placeholder="请选择">
        <el-option v-for="item in treatmentResultsList" :key="item.id" :label="item.name"
                   :value="item"></el-option>
      </el-select>
    </div> -->
    <!--分配给-->
    <!-- <div class="search_list">
      <span class="search_text">*分配给：</span>
      <el-select
        size="small"
        v-model="assignedTo"
        placeholder="请输入关键词"
        value-key="id">
        <el-option
          v-for="item in assignedToList"
          :key="item.id"
          :label="item.name"
          :value="item">
        </el-option>
      </el-select>
      <div style="padding-left: 90px;padding-top: 10px">
        <el-button type="primary" size="small" @click="determine">确定</el-button>
      </div>
    </div> -->
    <!-- </div> -->
    <!--时间线-->
    <!-- <div id="time-line" class="blockMould">
      <el-timeline>
        <el-timeline-item
          v-for="(activity, index) in activities"
          :key="index"
          :color="activity.color"
          :timestamp="activity.timestamp"> -->
    <!--时间线左边-->
    <!-- <div class="line-left">
      <div class="interval">
        {{ activity.content1 }}
      </div>
      <div class="interval">
        {{ activity.content2 }}
      </div>
    </div> -->
    <!--时间线右边-->
    <!-- <div class="line-right">
      <div class="interval">{{ activity.content3 }}</div>
      <div class="interval">{{ activity.content1 }}{{ activity.content3 }}</div>
      <div class="interval">{{ activity.content1 }}{{ activity.content4 }}{{ activity.content5 }}</div>
    </div>
  </el-timeline-item>
</el-timeline>
</div> -->
  </div>
</template>

<script>
import {baseAjax, decryptMobile} from "@/api/api";
import {statusCode} from '@/utils/index.js';
import Cookies from "js-cookie";

export default {
  data() {
    return {
      //工单编号
      workOrderId: 0,
      //当前状态
      workOrderStatus: '',
      //创建人
      createRepName: '',
      //创建人邮箱
      email: '',
      //拜访时间
      callTime: '',
      //截止时间
      deadlineTime: '',
      //当前处理人-名字
      currentHandlerName: '',
      //当前处理人-邮箱
      currentHandlerEmail: '',
      //项目
      productName: '',
      //医生信息-医生
      doctorName: '',
      //医生信息-医院
      hospitalName: '',
      //医生信息-科室
      depart: '',
      //拜访记录-编号
      callRecordId: '',
      //拜访记录-拜访结果
      callResult: '',
      //工单标题
      workOrderTitle: '',
      //工单描述
      workOrderDesc: '',
      //图片
      imgUrls: '',
      //处理结果
      treatmentResults: '',
      //创建时间
      sysInsert: '',
      treatmentResultsList: [
        {
          id: 0,
          name: '分配工单',
        }, {
          id: 1,
          name: '完成工单',
        }
      ],
      //分配给
      loading: false,
      assignedTo: '',
      assignedToList: [],
      //工单流转
      activities: [],

      dealRepId: {
        dealRepIdNew: '', //当前处理人
        dealRepIdOld: '', //创建人
      },
      //代表信息
      user_info: '',
      //手机号
      doctorContact: [],
      is_finish_work: true,   //是否完成工单（显示处理流程左侧灰色虚线）
    }
  },
  watch: {
    treatmentResults() {
      if (this.treatmentResults.id == 1) {
        this.assignedToList.forEach((val) => {
          if (val.name == this.createRepName) {
            this.assignedTo = {
              id: val.id,
              name: val.name
            }
          }
        })
      } else {
        this.assignedTo = ''
      }
    }
  },
  mounted() {
    this.user_info = JSON.parse(this.EncryUtil.decryptByAES(Cookies.get('user_info')));
    if (this.$route.query.workOrderId) {
      this.requestData(this.$route.query.workOrderId)
      this.allFounderHandler()
    } else {
      this.$router.push('/myWorkOrder')
    }
  },
  methods: {
    //工单详情
    requestData(workOrderId) {
      this.activities = []
      let info_work_order = {
        url: '/work_order/info_work_order?workOrderId=' + workOrderId,
        method: 'GET',
      }
      baseAjax(info_work_order, '', (res) => {
        if (res.code == statusCode.success) {
          if (res.data.workOrderResponse.doctorContact.split(',').length > 1) {
            res.data.workOrderResponse.doctorContact.split(',').forEach(item => {
              decryptMobile(item).then((res) => {
                if (res.data.code === statusCode.success) {
                  if (this.user_info.type == 1) {
                    if (this.user_info.role.length > 0 && this.user_info.role[0].roleId == 4) {
                      this.doctorContact.push(res.data.data)
                    } else {
                      let isPhone = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/;
                      if (isPhone.test(res.data.data)) {
                        this.doctorContact.push(res.data.data.substr(0, 3) + "****" + res.data.data.substr(7))
                      } else {
                        console.log(res.data.data.length)
                        this.doctorContact.push(res.data.data.replace(res.data.data.slice(-4), '****'))
                      }
                    }
                  } else {
                    this.doctorContact.push(res.data.data)
                  }
                }
              })
            })
          } else {
            decryptMobile(res.data.workOrderResponse.doctorContact).then((res) => {
              if (res.data.code === statusCode.success) {
                if (this.user_info.type == 1) {
                  if (this.user_info.role.length > 0 && this.user_info.role[0].roleId == 4) {
                    this.doctorContact.push(res.data.data)
                  } else {
                    let isPhone = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/;
                    if (isPhone.test(res.data.data)) {
                      this.doctorContact.push(res.data.data.substr(0, 3) + "****" + res.data.data.substr(7))
                    } else {
                      console.log(res.data.data.length)
                      this.doctorContact.push(res.data.data.replace(res.data.data.slice(-4), '****'))
                    }
                  }
                } else {
                  this.doctorContact.push(res.data.data)
                }
              }
            })
          }
          this.workOrderId = res.data.workOrderResponse.workOrderId
          this.workOrderStatus = res.data.workOrderResponse.workOrderStatus
          this.createRepName = res.data.workOrderResponse.createRepName
          this.email = res.data.workOrderResponse.email
          this.callTime = res.data.workOrderResponse.callTime
          this.sysInsert = res.data.workOrderResponse.sysInsert
          this.deadlineTime = res.data.workOrderResponse.deadlineTime
          this.productName = res.data.workOrderResponse.productName
          this.doctorName = res.data.workOrderResponse.doctorName
          this.hospitalName = res.data.workOrderResponse.hospitalName
          this.depart = res.data.workOrderResponse.depart
          this.callRecordId = res.data.workOrderResponse.callRecordId
          this.callResult = res.data.workOrderResponse.callResult
          this.workOrderTitle = res.data.workOrderResponse.workOrderTitle
          this.workOrderDesc = res.data.workOrderResponse.workOrderDesc
          this.imgUrls = JSON.parse(res.data.workOrderResponse.imgUrls)
          //工单流转
          this.activities.push({
            content1: res.data.workOrderResponse.createRepName,
            content2: res.data.workOrderResponse.email,
            content3: '创建工单',
            content4: '把工单分配给',
            content5: res.data.workOrderResponse.dealRepName,
            timestamp: res.data.workOrderResponse.sysInsert,
          })
          for (let key in res.data.workOrderCirculationResponse) {
            let One = res.data.workOrderCirculationResponse[res.data.workOrderResponse.firstCirculationId]
            if (res.data.workOrderCirculationResponse[key].dealRepStatus == 0) {
              if (res.data.workOrderResponse.firstCirculationId == [key]) {
                this.activities.push({
                  content1: One.name,
                  content2: One.email,
                  content3: '分配工单',
                  content4: '把工单分配给',
                  content5: res.data.workOrderCirculationResponse[One.toCirculationId].name,
                  timestamp: One.sysInsert,
                })
              } else {
                this.activities.push({
                  content1: res.data.workOrderCirculationResponse[key].name,
                  content2: res.data.workOrderCirculationResponse[key].email,
                  content3: '分配工单',
                  content4: '把工单分配给',
                  content5: res.data.workOrderCirculationResponse[res.data.workOrderCirculationResponse[key].toCirculationId].name,
                  timestamp: res.data.workOrderCirculationResponse[key].sysInsert,
                })
              }
            } else {
              if (res.data.workOrderCirculationResponse[key].dealRepStatus == 1) {
                this.currentHandlerName = res.data.workOrderCirculationResponse[key].name
                this.currentHandlerEmail = res.data.workOrderCirculationResponse[key].email
                this.dealRepId.dealRepIdNew = res.data.workOrderCirculationResponse[key].dealRepId
                this.dealRepId.dealRepIdOld = res.data.workOrderCirculationResponse[key].createRepId
                if (res.data.workOrderResponse.workOrderStatus == 1) {
                  this.activities.push({
                    content1: res.data.workOrderCirculationResponse[key].name,
                    content2: res.data.workOrderCirculationResponse[key].email,
                    content3: '完成工单',
                    content4: '完成工单返回给',
                    content5: res.data.workOrderResponse.createRepName,
                    timestamp: res.data.workOrderCirculationResponse[key].sysInsert,
                  })
                }
              }
            }
          }
          this.is_finish_work = this.activities[this.activities.length - 1].content3 == '完成工单' ? true : false;
        }
      })
    },
    //所有创建人、当前处理人
    allFounderHandler() {
      let electAllRepList = {
        url: '/representative/selectAllRepList',
        method: 'GET',
      }
      baseAjax(electAllRepList, '', (res) => {
        if (res.code == statusCode.success) {
          this.assignedToList = res.data
        }
      })
    },
    //分配
    determine() {
      if (!this.treatmentResults) {
        this.$message.error('请选择处理结果!');
        return;
      }
      if (!this.treatmentResults) {
        this.$message.error('请选择分配给那位代表!');
        return;
      }
      let obj = {
        createRepIdNew: this.dealRepId.dealRepIdNew,  //新的工单流转创建者id =当前处理人
        createRepIdOld: this.dealRepId.dealRepIdOld,  //旧的工单流转创建者ID = 创建人
        dealRepIdNew: this.assignedTo.id,    //新的处理人ID = 新的处理人
        dealRepIdOld: this.dealRepId.dealRepIdNew,    //旧的处理人ID
        toRepId: this.assignedTo.id,         //工单需要转发给的人ID
        workOrderId: this.workOrderId,     //工单号
        workOrderStatus: this.treatmentResults.id  //待处理
      }
      console.log(JSON.stringify(obj))
      let create_work_order_circulation = {
        url: '/work_order_circulation/create_work_order_circulation',
        method: 'POST',
      }
      baseAjax(create_work_order_circulation, obj, (res) => {
        if (res.code == statusCode.success) {
          console.log(res)
          if (res.data) {
            this.$message.success('分配成功!');
            this.treatmentResults = ''
            if (this.$route.query.workOrderId) {
              this.requestData(this.$route.query.workOrderId)
              this.allFounderHandler()
            } else {
              this.$router.push('/myWorkOrder')
            }
          } else {
            this.$message.error('分配失败!');
          }
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
// h4 {
//   margin: 10px;
//   display: inline-block;

//   i {
//     font-weight: bold;
//     font-size: 14px;
//   }
// }

/deep/ .el-input.el-input--suffix.is-focus > .el-input__inner {
  border-color: #2A82E2 !important;
}

.search_list {
  margin: 15px 0px 10px 15px;
  align-items: center;
  font-family: PingFangSC-Regular, PingFang SC;

  .search_text {
    width: 90px;
    font-size: 16px;
    font-weight: 400;
    display: inline-block;
  }

  .el-select, .el-option {
    width: 300px;
  }
}

//
.verticalLine1px {
  height: 80px;
  width: 1px;
  border-left: 1px solid #000;
}

// #time-line {
//   .el-timeline {
//     margin-left: 300px;
//     font-size: 15px !important;

//     /deep/ .el-timeline-item {
//       min-height: 100px;
//     }

//     /deep/ .el-timeline-item__wrapper {
//       padding-left: 45px;
//     }

//     /deep/ .el-timeline-item__timestamp {
//       margin-top: 8px;
//       position: absolute !important;
//       left: -180px;
//       top: 44px;
//       font-size: 15px !important;
//       color: #000;
//     }

//     /deep/ .el-timeline-item__content {
//       color: #000;
//     }

//     .line-left {
//       position: absolute !important;
//       left: -340px !important;
//       width: 300px !important;
//       text-align: end;
//     }

//     .interval {
//       margin-bottom: 8px;
//     }
//   }
// }

ul, li {
  list-style: none;
  padding: 0;
  margin: 0;
}

.work_order_detail {
  display: flex;

  h4 {
    margin: 0;
    font-size: 18px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: bold;
    color: #202020;
  }

  h6 {
    margin: 0;
  }

  .work_order_left, .work_order_right {
    width: 49%;

    .left_top, .left_bottom, .right_top, .right_bottom {
      background-color: #FFFFFF;
      border-radius: 2px;
      padding: 16px 24px 24px 22px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
    }

    .left_top, .right_top {
      margin-bottom: 16px;
    }

    .left_top {
      padding-right: 33px;

      h4 {
        margin-bottom: 15px;
      }

      ul {
        li:first-child {
          margin-bottom: 21px;
        }

        li {
          h6 {
            font-size: 14px;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.4);
            margin-bottom: 9px;
          }

          .doctor_info, .visit_record {
            background-color: rgba(240, 242, 245, 0.5);
            border-radius: 4px;
            padding: 16px 0 18px 20px;

            img {
              margin-right: 7px;
            }

            .text {
              color: #909090;
            }

            .value {
              color: #333333;
            }
          }

          .doctor_info {
            display: flex;
            flex-wrap: wrap;

            .hospital {
              margin-right: 44px;

              div:first-child {
                margin-bottom: 10px;
              }

              div {
                display: flex;
                align-items: center;
              }
            }

            .depart {
              div:first-child {
                margin-bottom: 10px;
              }

              div {
                display: flex;
                align-items: center;
              }
            }
          }

          .visit_record {
            div {
              display: flex;
              align-items: center;
              margin-bottom: 10px;
            }
          }
        }
      }
    }

    .left_bottom {
      h4 {
        margin-bottom: 17px;
      }

      ul {
        li {
          margin-bottom: 12px;

          .work_text {
            color: rgba(0, 0, 0, 0.4);
            width: 86px;
            display: inline-block;
          }
        }

        .current_deal_user {
          margin-bottom: 40px;
        }

        li:last-child {
          display: flex;
        }

        li:first-child {
          margin-bottom: 11px;

          .el-tag {
            border-radius: 1px;
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            height: 20px;
            border-color: transparent;
            display: inline-flex;
            align-items: center;
            padding: 0 9px;
            margin-left: 12px;
          }
        }
      }
    }

    .right_top {
      h4 {
        margin-bottom: 26px;
      }

      .operation_deal {
        width: 100%;

        .operation_sub_content {
          display: flex;
          justify-content: space-between;
          margin-bottom: 20px;
          width: 100%;

          .result {
            margin-right: 24px;
          }

          .result, .distribution {
            width: 48%;
          }

          .operation_text {
            margin-bottom: 7px;
            display: flex;
            align-items: center;

            span:first-child {
              color: #F65C44;
              display: block;
              transform: translateY(3px);
              margin-right: 2px;
            }
          }

          /deep/ .el-select {
            width: 100%;

            .el-input {
              .el-input__inner {
                border-radius: 2px;
                border: 1px solid #DDDFE6;
              }
            }
          }
        }

        .btn {
          .el-button {
            height: 32px;
            background-color: rgba(42, 130, 226, 1);
            border-radius: 2px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(255, 255, 255, 0.9);
            border-color: transparent;
            display: flex;
            justify-content: center;
            align-items: center;
          }

          .el-button:hover {
            background-color: rgba(42, 130, 226, 0.7);
          }

          .el-button:active {
            background-color: #1F6DC3;
          }
        }
      }
    }

    .right_bottom {
      height: 584px;

      h4 {
        margin-bottom: 20px;
      }

      #time-line {
        padding-left: 4px;
        box-sizing: border-box;
        height: 91%;
        overflow: auto;

        /deep/ .el-timeline {
          position: relative;
          height: 100%;

          .el-timeline-item {
            .el-timeline-item__tail {
              border: 0;
            }

            .el-timeline-item__tail:before {
              content: "";
              display: block;
              position: absolute;
              width: 2px;
              left: 0;
              top: 0;
              height: 100%;
              background-image: linear-gradient(to top, rgba(42, 130, 226, 1) 0%, rgba(42, 130, 226, 1) 50%, transparent 50%);
              background-size: 1px 6px;
              background-repeat: repeat-y;
            }

            .el-timeline-item__node {
              width: 13px;
              height: 13px;
              background-color: #FFFFFF;
              border: 2px solid rgba(42, 130, 226, 1);
            }

            .el-timeline-item__wrapper {
              .el-timeline-item__timestamp.is-top {
                padding-top: 2px;
              }

              .el-timeline-item__timestamp {
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: rgba(0, 0, 0, 0.4);
              }

              .el-timeline-item__content {
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: rgba(0, 0, 0, 0.8);

                .line-left {
                  margin-bottom: 14px;
                }

                .line-right {
                  width: 100%;
                  background-color: rgba(240, 242, 245, 0.5);
                  border-radius: 4px;
                  padding: 16px 20px 20px;
                  font-size: 14px;
                  font-family: PingFangSC-Medium, PingFang SC;

                  div:first-child {
                    font-weight: 500;
                    color: rgba(0, 0, 0, 0.8);
                    margin-bottom: 16px;
                  }

                  .detail {
                    font-weight: 400;
                    color: rgba(0, 0, 0, 0.4);
                    margin-bottom: 2px;
                  }
                }
              }
            }
          }

          .el-timeline-item:before {
            content: "";
            display: block;
            position: absolute;
            width: 1px;
            left: 4px;
            top: 0;
            height: 100%;
            background-image: linear-gradient(to top, rgba(228, 231, 235, 1) 0%, rgba(228, 231, 235, 1) 50%, transparent 50%);
            background-size: 1px 6px;
            background-repeat: repeat-y;
          }
        }
      }

      #time-line::-webkit-scrollbar {
        display: none;
      }
    }

    // 无操作处理，工单信息无图片
    .right_bottom_not_operate_height {
      height: 710px;
    }

    //有操作处理，工单信息无图片
    .right_bottom_operate_height {
      height: 500px;
    }

    //无操作处理，工单信息有图片
    .right_bottom_not_operate_img_height {
      height: 794px;
    }

    // 工单完成，隐藏灰色虚线
    .right_bottom_el_timeline {
      #time-line {
        .el-timeline {
          .el-timeline-item:before {
            display: none;
          }
        }
      }
    }
  }

  .work_order_left {
    margin-right: 16px;
  }
}

</style>
